<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
<html onapplicationready="applicationReady()" onbeforeapplicationclose="closeAll()" >
<head>
<title>Translator Example</title>
<style type="text/css">
input { font-size:11; font-family:verdana; }
div { font-size:11; font-family:verdana; }
label { font-size:11; font-family:verdana; }
td { font-size:11; font-family:verdana; }
button { font-size:11; font-family:verdana; }
select { font-size:11; font-family:verdana; }
.allstyle { font-size:11; font-family:verdana; }
select{ font-size:11; font-family:verdana; }
</style>
<script src="/cordys/wcp/application.js" > </script>
<script type="text/javascript">
var timer;
var contextTree;
//Add a context menu item to the already existing context menu
function addContextItem()
{
var promtMessage = translator.translate("Add Context Item")
application.prompt(promtMessage, "", promptCallBackAddContextItem);
}
function promptCallBackAddContextItem(name)
{
if (name == null) return;
application.prompt("Enter another Context Menu label_id", "", promptCallBackAddAnotherContextItem);
}
function promptCallBackAddAnotherContextItem(name)
{
if (name)
{
var contextItem = document.all['myContext'];
var addedItem = contextItem.addItem("",addedContext,name,true);
translator.registerHTML(addedItem, addedItem.innerHTML);
application.notify(translator.translate('Item is added !'));
}
else
{
application.notify(translator.translate("Invalid item, NOT added !"));
}
}
//Alert that this item is added dynamically
function addedContext()
{
application.notify(translator.translate('This item is added dynamically'));
}
function changeSelectedItem()
{
//Just to select the option box with the right language
//Nothing to do with component
languageOptions.value = window.application.event.newLanguage;
}
//Change the language of the application
function changeLanguage()
{
translator.setNewLanguage(languageOptions.value);
}
//Add a Tree Item
function addTreeItem(selectedNode)
{
application.prompt("Enter Tree Item Name", "", promptCallBackAddTreeItem);
}
function promptCallBackAddTreeItem(name)
{
if (name == null) return;
application.prompt("Enter Tree Item Label [Optional]", "", promptCallBackAddTreeItemLabel(name));
}
function promptCallBackAddTreeItemLabel(name)
{
return function(label)
{
if (name)
{
var newTreeItem = (cordys.cloneXMLDocument(TreeItem.XMLDocument,true)).documentElement;
setXMLNodeText(newTreeItem,"caption",name);
setXMLNodeText(newTreeItem,"description",name);
if (label) setXMLNodeText(newTreeItem,"label_id",label);
contextTree.getSelectedItem().addItem(newTreeItem);
}
else
{
application.notify(translator.translate("Invalid item, NOT added !"));
}
}
}
function setXMLNodeText(xmlnode,node,sValue)
{
var xpath = ".//*[local-name()= '"+node +"']";
cordys.setTextContent(cordys.selectXMLNode(xmlnode,xpath), sValue);
}
function expand()
{
window.application.event.activeElement.getTreeItem().expand();
}
function expandAll()
{
window.application.event.activeElement.getTreeItem().expandAll();
}
function collapse()
{
window.application.event.activeElement.getTreeItem().collapse();
}
function collapseAll()
{
window.application.event.activeElement.getTreeItem().collapseAll();
}
//function that is called whenever an item is added in the tree
function itemAdded()
{
var item = window.application.event.treeItem.getLabel();
translator.registerHTML(item, item.innerHTML);
}
//Called when translator daemon is loaded completely. Sets the language and loads the languageChooser page
function initialize()
{
if (window.application.event && window.application.event.active == true)
{
//Tree data is set only when the active state is up. This is because the translator
//does not have an ID, and so, when tree data is assigned, registering is not possible
//without ID.
contextTree = document.getElementById("contextTree");
if (contextTree.root) contextTree.root.expandAll();
//Since attaching a different context menu to one item in the Tree is not possible,
//We go in for dynamic addition of that item using registerHTML. This is done only
//for favourites item
favouritesMenu = document.getElementById("myFavourites");
var item = contextTree.root.getChildContainer().childNodes;
favouritesMenu.registerHTML(item[item.length - 1]);
}
}
function applicationReady()
{
cal.valueIsNull = true;
}
function closeAll()
{
if (system.containers['LanguagePreferences']) system.containers['LanguagePreferences'].close();
}
</script>
</head>
<!--Tree Displayed-->
<script type="cordys/xml" id="menuData" >
<menu>
<tuple>
<old>
<MainNode>
<caption>Demo using Menu Node</caption>
<description>Demo using Menu Node</description>
<id>menuData</id>
<Continents>
<caption>Continents</caption>
<description>Continents</description>
<Continent>
<caption>Asia</caption>
<description>Asia</description>
<Country>
<caption>India</caption>
<description>India is my Country</description>
</Country>
<Country>
<caption>Japan</caption>
<description>Japan popular for electronic trends</description>
</Country>
</Continent>
<Continent>
<caption>Europe</caption>
<description>Europe</description>
<Country>
<caption>The NetherLands</caption>
<description>The NetherLands</description>
</Country>
<Country>
<caption>United Kingdom</caption>
<description>United Kingdom</description>
</Country>
</Continent>
</Continents>
<Oceans>
<caption>Oceans</caption>
<description>Oceans</description>
<Ocean>
<caption>The Great Ocean</caption>
<description>Atlantic</description>
<id>GeneralInformation</id>
</Ocean>
</Oceans>
</MainNode>
</old>
</tuple>
<tuple>
<old>
<Favourites>
<caption>Favourites</caption>
<description>Favourites</description>
<id>menuData</id>
</Favourites>
</old>
</tuple>
</menu>
</script>
<!--Template TreeItem for adding a leaf to Tree-->
<script type="cordys/xml" id="TreeItem" >
<Favourites>
<caption>MyFavourite</caption>
<description>MyFavourite</description>
<id>nwData</id>
<label_id>label</label_id>
</Favourites>
</script>
<!--Schema definition for Tree-->
<script type="cordys/xml" id="MenuTreeSchema" >
<TreeSchema>
<searchPath>//tuple/old/</searchPath>
<Root>
<description>Demo</description>
</Root>
<TreeItem id="MainNodeID" >
<searchPath>MainNode</searchPath>
<description>caption</description>
<contextMenu>treeContext</contextMenu>
</TreeItem>
<TreeItem id="Continents" >
<searchPath>Continents</searchPath>
<description>caption</description>
<contextMenu>treeContext</contextMenu>
</TreeItem>
<TreeItem id="Continent" >
<searchPath>Continent</searchPath>
<description>caption</description>
<contextMenu>treeContext</contextMenu>
</TreeItem>
<TreeItem id="Oceans" >
<searchPath>Oceans</searchPath>
<description>caption</description>
<contextMenu>treeContext</contextMenu>
</TreeItem>
<TreeItem id="Country" >
<searchPath>Country</searchPath>
<description>caption</description>
<contextMenu>treeContext</contextMenu>
</TreeItem>
<TreeItem id="Ocean" >
<searchPath>Ocean</searchPath>
<description>caption</description>
<contextMenu>treeContext</contextMenu>
</TreeItem>
<TreeItem id="FavouritesID" >
<searchPath>Favourites</searchPath>
<description>caption</description>
</TreeItem>
</TreeSchema>
</script>
<script type="cordys/xml" id="xmlPeriods" >
<periods>
<period>
<description>Bidding</description>
<from>
<date>4</date>
<month>9</month>
<year>2002</year>
</from>
<to>
<date>10</date>
<month>9</month>
<year>2002</year>
</to>
</period>
</periods>
</script>
<script type="cordys/xml" id="languageChooserApplication" >
<Application>
<description>Language Preferences</description>
<caption>Language Preferences</caption>
<id>LanguagePreferences</id>
<url>/cordys/wcp/demo/languagechooser.htm</url>
<frame docked="false" height="180" width="200" left="350" top="120" >right</frame>
</Application>
</script>
<BODY bottommargin=20 leftmargin=20 rightmargin=20 topmargin=20 style="width:100%;height:100%" >
<!-- Translator Component Definition -->
<div cordysType="wcp.library.util.Translator" id="translator" dictionary="/cordys/wcp/demo/demo.translation" onlanguagechange="changeSelectedItem()" onactive="initialize()" style="position:absolute;display:none;width:150;height:137">
</div>
<div cordysType = "wcp.library.util.Validate"> </div>
<div cordysType="wcp.library.ui.ContextMenu" id="myContext" >
<div id="my1" onclick="application.notify(translator.translate('Hello'))" translatable="true" >Say Hello</div>
<div id="my2" separator="true"> </div>
<div id="my3" onclick="application.notify(translator.translate('World'))" translatable="true" >Say World</div>
</div>
<div cordysType="wcp.library.ui.ContextMenu" id="treeContext" >
<div onclick="expand();" translatable="true" >Expand</div>
<div id="tree1" onclick="collapse();" translatable="true" >Collapse</div>
<div onclick="expandAll();" translatable="true" >Expand All</div>
<div separator="true"> </div>
<div onclick="collapseAll();" translatable="true" >Collapse All</div>
</div>
<div cordysType="wcp.library.ui.ContextMenu" id="myFavourites" >
<div onclick="addTreeItem()" translatable="true" >Add</div>
</div>
<label translatable="true" style="font-size:12;font-weight:bold" >A Demo Page for Translator</label>
<table>
<tr>
<td><label translatable="true" >Language</label><br />
<div cordysType ="wcp.library.ui.Dropdown" name="languageOptions" id="languageOptions" style="width:150px;height:20px" class="input" onchange="changeLanguage()" >
<div align="left" value="def" translatable="true" >Default</div>
<div align="left" value="en" translatable="true" >English</div>
<div align="left" value="en-gb" translatable="true" >English GB</div>
<div align="left" value="en-us" translatable="true" >English US</div>
<div align="left" value="nl" translatable="true" >Dutch</div>
<div align="left" value="fr" translatable="true" >French</div>
<div align="left" value="zh-cn" translatable="true" >Chinese</div>
</div>
</td>
</tr>
</table>
<hr/>
<div translatable="true" label_id="lbl25" >Context Menu</div>
<div class="input mainbody" style="width:90%;height:15%;overflow:auto" >
<div style="padding-left:10px;padding-top:5px" >
<div contextmenu="myContext" translatable="true" label_id="lMenu" >Right Click HERE to see the Context Menu</div>
<br />
<span translatable="true" >Click to Add a context menu item dynamically
<button onclick="addContextItem()" class="medium" translatable="true" title="Add Context Item" >Add Context Item</button><br />
<div ><span translatable="true" >Possible Items to add to test the language translator : "Item", "Hello" </div>
</div>
</div>
<br />
<div translatable="true" label_id="lbl26" >Tree Control</div>
<div class="input mainbody" style="width:90%;height:35%" >
<div style="padding:10px;width:100%;height:70%;overflow:auto;border-bottom: 1px solid gray" >
<div cordysType="wcp.library.ui.Tree" id="contextTree" treeData='menuData' treeSchema='MenuTreeSchema' onadditem="itemAdded()"> </div>
</div>
<div style="padding:10px;" >
<span translatable="true" >Right click to expand and collapse tree nodes.
<span translatable="true" label_id="lbl23" >Right Click <b>Favourites</b> to add a leaf
</div>
<div style="padding-left:10px;" ><span translatable="true" >Possible Items to add to test the language translator : "Item", "Hello" </div>
</div>
<br />
<div translatable="true" label_id="lbl27" >Calendar Control</div>
<div class="input mainbody" style="width:90%;height:35%;overflow:auto" >
<div style="padding:10px" >
<span style="margin:10px" >
<div cordysType="wcp.library.ui.Calendar" id="cal" translatorID="translator" style="width:150px;height:160px;" periods="xmlPeriods.XMLDocument">
</div>
</div>
</div>
</BODY>
</html>